﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>我爱我家</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script> 
    <script src="js/mockdata.js" type="text/javascript"></script>
    <script src="js/lablemaker.js" type="text/javascript"></script>
    <script src="js/MapUtil.js" type="text/javascript"></script> 
    <script src="js/ExtInfoWindow.js" type="text/javascript"></script> 
</head>
<body>
<div class="block">
<!--pageheader-->
    <div class="Cheader">
    	<div><img src="images/logo1.gif" alt="log" /></div>
    </div>
<!--pageheader-->   
   <div class="blank15"></div>
   <div class="LeftC f_l">
      <div class="cate_top">购房快速导航</div>
      <div class="category_tree">
      <ul class="searchfilterparent">
        <li>
    	    <h1><a href="#">售价：</a></h1>
            <span><a href="#" class="searchfilter filter_selected" filtertype="price" filtervalue="[0,-1]">价格不限</a></span>
            <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[0,50]">50万以下</a></span>
            <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[200,250]">200-250万</a></span>
            <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[50,80]">50-80万</a></span>
            <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[250,300]">250-300万</a></span>
            <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[80,100]">80-100万</a></span>
            <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[300,500]">300-500万</a></span>
            <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[100,120]">100-120万</a></span>
            <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[500,1000]">500-1000万</a></span>
            <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[120,150]">120-150万</a></span>
            <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[1000,-1]">1000万以上</a></span>
            <span><a href="#" class="searchfilter" filtertype="price" filtervalue="[150,200]">150-200万</a></span>
         </li>
       </ul>
       <ul class="searchfilterparent">
         <li>
    	    <h1><a href="#">房型：</a></h1>
            <span><a href="#" class="searchfilter filter_selected" filtertype="rooms" filtervalue="0">房型不限</a></span>
            <span><a href="#" class="searchfilter" filtertype="rooms" filtervalue="1">一室</a></span>
            <span><a href="#" class="searchfilter" filtertype="rooms" filtervalue="4">四室</a></span>
            <span><a href="#" class="searchfilter" filtertype="rooms" filtervalue="2">二室</a></span>
            <span><a href="#" class="searchfilter" filtertype="rooms" filtervalue="5">五室</a></span>
            <span><a href="#" class="searchfilter" filtertype="rooms" filtervalue="3">三室</a></span>
            <span><a href="#" class="searchfilter" filtertype="rooms" filtervalue="6">五室以上</a></span>
         </li>
      </ul>
  
      </div>  

    <DIV class="my_left_category">
        <DIV class="my_left_cat_list">
            <DIV class="h2_cat" onMouseOver="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'" style="margin-top:0px">
              <H3 style="OVERFLOW: hidden"><A href="#">面积</A></H3>
              <DIV class="h3_cat">
                  <DIV class="shadow">
                      <DIV class="shadow_border">
                          <UL class="searchfilterparent">
                              <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[0,-1]">面积不限</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[130,150]">130-150平米</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[0,50]">50平米以下</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[150,200]">150-200平米</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[50,70]">50-70平米</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[200,300]">200-300平米</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[70,90]">70-90平米</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[300,500]">300-500平米</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[90,110]">90-110平米</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[500,-1]">500平米以上</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="size" filtervalue="[110,130]">110-130平米</A></LI>
                          </UL>
                      </DIV>
                  </DIV>
              </DIV>
            </DIV>
            <DIV class="h2_cat" onMouseOver="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
              <H3 style="OVERFLOW: hidden"><A href="#">建造年代</A></H3>
              <DIV class="h3_cat">
                  <DIV class="shadow">
                      <DIV class="shadow_border">
                          <UL class="searchfilterparent">
                              <LI><A href="#" class="searchfilter" filtertype="age" filtervalue="0">建造年代不限</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="age" filtervalue="2">1995-2000年</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="age" filtervalue="4">2008年后</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="age" filtervalue="1">1995年前</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="age" filtervalue="3">2000-2008年</A></LI> 
                          </UL>
                      </DIV>
                  </DIV>
              </DIV>
            </DIV>
            <DIV class="h2_cat" onMouseOver="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
              <H3 style="OVERFLOW: hidden"><A href="#">类型</A></H3>
              <DIV class="h3_cat">
                  <DIV class="shadow">
                      <DIV class="shadow_border">
                          <UL class="searchfilterparent">
                              <LI><A href="#" class="searchfilter" filtertype="type" filtervalue="0">类型不限</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="type" filtervalue="1">普通住宅</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="type" filtervalue="2">四合院</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="type" filtervalue="3">别墅</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="type" filtervalue="4">公寓</A></LI>
                              <LI><A href="#" class="searchfilter" filtertype="type" filtervalue="5">其它</A></LI> 
                          </UL>
                      </DIV>
                  </DIV>
              </DIV>
            </DIV>
        </DIV>
    </DIV> 
    </div>  
   <div class="f_r">
     <div id="map_canvas" class="map_canvas" style=" clear:both;"></div>
   </div> 
</div> 
<div class="noResultInfoWindow" style="display:none">
    <div class="map2_notice" style="display:block">
        <div class="l1">在这个位置没找到符合您要求的房子&nbsp;:(</div>
        <div class="l2">您可以试试下面的方法：</div>
        <ul class="l3ul">
            <li>拖动地图到其他位置，或者缩小地图试试。</li>
            <li>如果您选择了某个价格范围，可以考虑换一个再试试。<br/>其他筛选条件也是一样哦。</li>
        </ul>
        <div class="isee">
            <div class="noprompt"><input type="checkbox" id="chkNoPrompt" /><label for="chkNoPrompt">不再提醒</label></div>
            <div class="l4"><a href="javascript:;" class='map2_notice_close'>我知道了</a></div>
        </div>
  </div>
</div>
<div class="resultInfoWindow" style="display:none">
  <div class="map2_propwind">
    <div id="map2_propwind_close" class="map2_propwind_close"><a href="javascript:;">关闭</a></div>
    <h2>
      <span class="map2_propwind_commname"><a href="javascript:;" class="map2_propwind_listlink" target="_blank">中远两湾城</a></span>
      <span style="color:#FFFF00">均价：<strong class="prop_pricetrend"></strong></span>
    </h2>
    <div id="map2_info_wrapper">
        <div id="map2_propertys">
            <div id="map2_info_sort">
                <div class="sort_buttons">
                    <span>排序：</span>
                    <a class="sort_button" href="javascript:;" rel="21">面积</a>
                    <a class="sort_button" href="javascript:;" rel="11">总价</a>
                </div>
                <span class="span_propnum">
                    找到<em class="prop_num"></em>套房子
                </span>
                <span class="span_hqfilter">
                    <input type="checkbox" name="frm_ishq" id="map2_is_hq" /><label for="map2_is_hq">多图房源</label>
                </span>
            </div>
        <div class="map2_propwind_load" style="display:none;">
            <img src="http://pages.anjukestatic.com/img/map/load_18x18.gif" alt="loading..." />
        </div>
         <div id="noprops">
            <p>
                很抱歉，没有找到符合条件的房源。
            </p>
            <p>
                <strong>建议您：</strong><br />
                重新选择房源筛选条件。
            </p>
            <p class="red">
                &lt;--就在左边
            </p>
         </div>
         <ul class="property_list">
         </ul>
         <div id="map2_info_page">
            <a class="page_prev">上一页</a>
            <a class="page_next">下一页</a>
            <span class="total_pages"></span>
        </div>
    </div>
 </div>
    <div id="map2_filters">
         <h5>按售价筛选:</h5>
         <ul class="map2_filters_price">
            <li><a href="#">不限</a></li>
            <li><a href="#">250-300万</a></li>
            <li><a href="#">300-500万</a></li>
            <li><a href="#">500-1000万</a></li>
         </ul>
         <h5>按房型筛选:</h5>
         <ul class="map2_filters_housemodel map2_filters_housemodel_float">
            <li><a href="#">不限</a></li>
            <li><a href="#">一室</a></li>
            <li><a href="#">二室</a></li>
            <li><a href="#">三室</a></li>
         </ul>
         <ul class="map2_filters_morelink">
            <li><a href="javascript:;" class="map2_comm_moreinfo" target="_blank">查看小区详情&gt;&gt;</a></li>
            <li><a href="javascript:;" class="map2_comm_fresh" target="_blank">查看小区房价&gt;&gt;</a></li>
         </ul>
    </div>
 </div>
</div> 
 <script type="text/javascript">
     $(document).ready(function () {
         searchHouse.initialize({
             mapCanvas: ".map_canvas",
             width: 700,
             height: 500,
             mapView: ".mapView",
             satelliteView: ".satelliteView",
             searchFilter: ".searchfilter",
             searchFilterSelected: ".filter_selected",
             searchFilterParent: '.searchfilterparent',
             searchFilterTypeAttr: 'filtertype',
             searchFilterValueAttr: 'filtervalue'
         }
            );
     });

     var searchHouse = {
         map: null,
         markerManager: null,
         mapCanvas: null,
         zoomCategory: { city: 9, area: 12, detail: 16 },
         defultMapOptions: {
             zoom: 9,
             minZoom: 9,
             maxZoom: 20,
             mapTypeId: google.maps.MapTypeId.ROADMAP,
             mapTypeControl: false
         },
         beijing: new google.maps.LatLng(39.90555, 116.39147),
         makerManager: null,
         constants: { size: '面积', age: '建造年代', type: '类型' },
         h2_cat: '.h2_cat',
         h3_cat: '.h3_cat',
         h2_cat_title: " > h3 > a",
         mapOptions: null,
         searchHouseOptions: null,
         searchHouseFilters: { price: [0, -1], rooms: 0, size: [0, -1], age: 0, type: 0, bound: [], zoom: 9 },
         initializeSearchHouseOptions: function (_searchHouseOptions) {
             this.searchHouseOptions = {
                 mapCanvas: _searchHouseOptions.mapCanvas,
                 width: _searchHouseOptions.width,
                 height: _searchHouseOptions.height,
                 mapView: _searchHouseOptions.mapView,
                 satelliteView: _searchHouseOptions.satelliteView,
                 searchFilter: _searchHouseOptions.searchFilter,
                 searchFilterParent: _searchHouseOptions.searchFilterParent,
                 searchFilterSelected: _searchHouseOptions.searchFilterSelected,
                 searchFilterTypeAttr: _searchHouseOptions.searchFilterTypeAttr,
                 searchFilterValueAttr: _searchHouseOptions.searchFilterValueAttr
             };
         },
         initialize: function (_searchHouseOptions, _mapOptions) {
             this.initializeSearchHouseOptions(_searchHouseOptions);
             this.mapCanvas = $(this.searchHouseOptions.mapCanvas);
             if (this.searchHouseOptions.width) this.mapCanvas.width(this.searchHouseOptions.width);
             if (this.searchHouseOptions.height) this.mapCanvas.height(this.searchHouseOptions.height);
             this.mapOptions = _mapOptions ? _mapOptions : this.defultMapOptions;
             this.map = new google.maps.Map(this.mapCanvas.get(0), this.mapOptions);
             var currentLocation = searchHouse.setGeoLocation(this.map);

             this.markerManager = new MarkerManager(this.map);

             //map events
             google.maps.event.addListener(this.map, "bounds_changed", function () {
                 searchHouse.searchHouseFilters.bound = searchHouse.getMapBounds();
                 searchHouse.showSearchHouseResultAuto();
             });
             google.maps.event.addListener(this.map, "zoom_changed", function () {
                 searchHouse.searchHouseFilters.zoom = searchHouse.map.getZoom();
                 //searchHouse.showSearchHouseResultAuto();
             });

             $(this.searchHouseOptions.mapView).click(function () {
                 searchHouse.map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
             });
             $(this.searchHouseOptions.satelliteView).click(function () {
                 searchHouse.map.setMapTypeId(google.maps.MapTypeId.SATELLITE);
             });
             $(this.searchHouseOptions.searchFilter).click(function () {
                 var filtertype = $(this).attr(searchHouse.searchHouseOptions.searchFilterTypeAttr);
                 var filtervalue = $(this).attr(searchHouse.searchHouseOptions.searchFilterValueAttr)
                 if (filtertype && filtervalue) {
                     var selectedFilterClass = searchHouse.searchHouseOptions.searchFilterSelected + "[" + searchHouse.searchHouseOptions.searchFilterTypeAttr + "]";
                     $(this).parentsUntil(searchHouse.searchHouseOptions.searchFilterParent).parent().find(selectedFilterClass).removeClass(searchHouse.searchHouseOptions.searchFilterSelected.substr(1));
                     $(this).addClass(searchHouse.searchHouseOptions.searchFilterSelected.substr(1));
                     var h2_cat = $(this).parents(searchHouse.h2_cat);
                     if (h2_cat.size() > 0) {
                         $(h2_cat).find(searchHouse.h2_cat_title).text($(this).text()).css("color", "#EB5F00");

                     }
                     searchHouse.searchHouseFilters[filtertype] = eval(filtervalue);
                     searchHouse.showSearchHouseResultAuto();
                 }
             });
         },
         setGeoLocation: function (map) {
             var initialLocation = searchHouse.beijing;
             if (navigator.geolocation) {
                 browserSupportFlag = true;
                 navigator.geolocation.getCurrentPosition(function (position) {
                     initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                     map.setCenter(initialLocation);
                 }, function () {
                     map.setCenter(searchHouse.beijing);
                 });
             }
             else if (google.gears) {
                 browserSupportFlag = true;
                 var geo = google.gears.factory.create('beta.geolocation');
                 geo.getCurrentPosition(function (position) {
                     initialLocation = new google.maps.LatLng(position.latitude, position.longitude);
                     map.setCenter(initialLocation);
                 }, function () {
                     map.setCenter(searchHouse.beijing);
                 });
             }
             else {
                 map.setCenter(searchHouse.beijing);
             }
         },
         showSearchHouseResult: function (_searchHouseResult) {
             searchHouse.map.clearExtInfoWindow();
             searchHouse.markerManager.clearMarkers();
             var zoom = searchHouse.searchHouseFilters.zoom;
             var type = searchHouse.getZoomType(zoom);
             if ($(_searchHouseResult).size() == 0) {
                 searchHouse.showNoResultInfosWindow();
                 return;
             }

             $(_searchHouseResult).each(function (i, n) {
                 var latlng = new google.maps.LatLng(n[1], n[2]);
                 var innerHtml = searchHouse.getMarkerHtml({ title: n[0], count: n[3], type: type });
                 var className = type + 'marker';
                 var marker = searchHouse.markerManager.addMarker(
                                                         i,
                                                         latlng,
                                                         {
                                                             clickable: true,
                                                             className: className,
                                                             title: n[0],
                                                             innerHTML: innerHtml,
                                                             data: { zoomtype: type, result: n },
                                                             click: function (e) {
                                                                 var zoomtype = $(this).data('data').zoomtype;
                                                                 var events = { city: searchHouse.cityMarkerClick,
                                                                     area: searchHouse.areaMarkerClick,
                                                                     detail: searchHouse.detailMarkerClick
                                                                 };
                                                                 return events[zoomtype]($(this));
                                                             }
                                                         },
                                                         searchHouse.map);
             });
         },
         showSearchHouseResultAuto: function () {
             var results = searchHouse.getSearchHouseResult(searchHouse.searchHouseFilters);
             searchHouse.showSearchHouseResult(results);
         },
         getSearchHouseFilters: function () {
         },
         getMapBounds: function () {
             var boulds = searchHouse.map.getBounds();
             var northEast = boulds.getNorthEast();
             var southWest = boulds.getSouthWest();
             return [northEast, southWest];
         },
         getSearchHouseResult: function (_searchHouseFilters) {
             var zoom = searchHouse.searchHouseFilters.zoom;
             var zoomType = searchHouse.getZoomType(zoom);
             if (zoomType == 'city') {
                 return eval(liresult);
             }
             else if (zoomType == 'area') {
                 return eval(miresult)
             }
             else {
                 return eval(lagresult);
             }
         },
         getMarkerHtml: function (options) {
             var params = [];
             if (options.type == 'city') {
                 params[0] = options.title;
                 params[1] = options.count + "套";
             }
             else if (options.type == 'area') {
                 params[0] = options.count + "套";
                 params[1] = options.title;
             }
             else {
                 params[0] = options.count + "套";
                 params[1] = options.title;
             }

             return "<table border='0' cellpadding='0'  cellspacing='0'>"
                   + "     <tr>"
                   + "         <td ><div class='left'>" + params[0] + "</div></td>"
                   + "         <td ><div class='right'>" + params[1] + "</div></td>"
                   + "     </tr>"
                   + "  </table>";
         },
         getZoomType: function (zoom) {
             var zoomType = 'city';
             var zoomTypes = ['city', 'area', 'detail'];
             $(zoomTypes).each(function (i, n) {
                 if (zoom >= searchHouse.zoomCategory[n]) {
                     zoomType = n;
                 }
                 else {
                     return;
                 }
             });
             return zoomType;
         },
         cityMarkerClick: function (markerDiv) {
             var areaZoom = searchHouse.zoomCategory.area;
             var result = $(markerDiv).data('data').result;
             var centerLatLng = new google.maps.LatLng(result[1], result[2]);
             searchHouse.map.setCenter(centerLatLng);
             searchHouse.map.setZoom(areaZoom);
         },
         areaMarkerClick: function (markerDiv) {
             searchHouse.showHousesListInfosWindow(markerDiv);
         },
         detailMarkerClick: function (markerDiv) {
             searchHouse.showHousesListInfosWindow(markerDiv);
         },
         showHousesListInfosWindow: function (markerDiv) {
             var data = $(markerDiv).data('data');
             var id = $(markerDiv).data('markerid');
             if (id > 0) {
                 var result = data.result;
                 var latlng = new google.maps.LatLng(result[1], result[2]);
                 var infoWindowClone = $('.resultInfoWindow').clone();
                 $('.map2_propwind_listlink', infoWindowClone).text(result[0]);
                 $('.map2_propwind', infoWindowClone).css('display', 'block');
                 var content = infoWindowClone.html();
                 var infoWindow = new ExtInfoWindow(
                 'infowindow',
                 {
                     showMode: 'center',
                     content: content,
                     close: '.map2_propwind_close'
                 }
                 );
                 searchHouse.map.setExtInfoWindow(infoWindow);
             }
             else {
                 searchHouse.showNoResultInfosWindow();
             }
         },
         showNoResultInfosWindow: function () {
             var content = $('.noResultInfoWindow').clone().html();
             var infoWindow = new ExtInfoWindow(
                 'infowindow',
                 {
                     showMode: 'center',
                     content: content,
                     close: '.map2_notice_close'
                 }
             );
             searchHouse.map.setExtInfoWindow(infoWindow);
         }
     };
      
    </script>
</body>
</html>
